<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"><head>

  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>[ php or jsp ] + jquery.imgareaselect 处理图片截图等比缩放！ - ynial - ItEye技术网站</title>
    <meta name="description" content="在开发中难免碰到图片上传问题！图片上传问题很好解决，而上传到服务器上的图片尺寸大小不一，使表现层无法使用统一的规格显示被上传的图片。 那么被上传的图片的 等比例缩 与等比率放 还有等比率截图 可能会给我们的开发带来障碍！ 使用 jquery.imgareaselect图片处理插件完全可以解决这方面的问题；  jquery.imgareaselect 官方网站：http://odyniec.net/p ...">
    <meta name="keywords" content="imgareaselect 图片缩放 图片截图 php jquery  [ php or jsp ] + jquery.imgareaselect 处理图片截图等比缩放！">
    <link rel="shortcut icon" href="http://ynial.iteye.com/images/favicon.ico" type="image/x-icon">
    <link rel="search" type="application/opensearchdescription+xml" href="http://ynial.iteye.com/open_search.xml" title="ItEye">
    <link href="http://ynial.iteye.com/rss" rel="alternate" title="ynial" type="application/rss+xml">
    <link href="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/blog.css" media="screen" rel="stylesheet" type="text/css">
<link href="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/blue.css" media="screen" rel="stylesheet" type="text/css">
    <script src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/application.js" type="text/javascript"></script>
      
  <link href="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/SyntaxHighlighter.css" media="screen" rel="stylesheet" type="text/css">
  <script src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/shCoreCommon.js" type="text/javascript"></script>
<script src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/hotkey.js" type="text/javascript"></script>
  <script src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/code_favorites.js" type="text/javascript"></script>
  <style>
    div#main {background-color: transparent; border: 0; padding: 0px; width: 740px;}
  </style>
  <link href="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/ui.css" media="screen" rel="stylesheet" type="text/css">
  <script src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/compress.js" type="text/javascript"></script>
  <style type="text/css">.dp-j .annotation { color: #646464; }.dp-j .number { color: #C00000; }</style></head><body>
    <div id="header">
      <div id="blog_site_nav">
  <a href="http://www.iteye.com/" class="homepage">首页</a>
  <a href="http://www.iteye.com/news">新闻</a>
  <a href="http://www.iteye.com/forums">论坛</a>
  <a href="http://www.iteye.com/ask">问答</a>
  <a href="http://www.iteye.com/blogs">博客</a>
  <a href="http://www.iteye.com/job">招聘</a>
  <a href="#" onclick="return false;" id="msna"><u>更多</u> <small>▼</small></a>
  <div class="quick_menu" style="display: none;">
    <a href="http://www.iteye.com/wiki">专栏</a>
    <!--<a href="http://www.iteye.com/articles">文摘</a>//-->
    <a href="http://www.iteye.com/groups">群组</a>
    <a href="http://www.iteye.com/search">搜索</a>
  </div>
</div>
      <div id="user_nav">
      <a href="http://ynial.iteye.com/login" class="welcome" title="登录">您还未登录 !</a>
    <a href="http://www.iteye.com/all" style="color: red;">我的应用</a>
    <a href="http://ynial.iteye.com/login">登录</a>
    <a href="http://ynial.iteye.com/signup" class="nobg">注册</a>
  </div>
    </div>

    <div id="page">
      <div id="branding" class="clearfix">
        <div id="blog_name"><h1><a href="http://ynial.iteye.com/">ynial</a></h1></div>
        <div id="blog_preview">
          
        </div>
        <div id="blog_domain">永久域名 <a href="http://ynial.iteye.com/">http://ynial.iteye.com</a></div>
      </div>
      
      
      <div id="content" class="clearfix">
        <div id="main">
          


          


<div class="blog_main"> 
  <div class="blog_nav">
    
    <div class="pre_next">
      <a href="http://ynial.iteye.com/blog/593957" class="next" title="有关 codeigniter pagination 的注意事项">有关 codeigniter pagination 的注意事项</a>
      |
      <a href="http://ynial.iteye.com/blog/309689" class="pre" title="css !important">css !important</a>
    </div>
  </div>
  <div class="blog_title">
    <div class="date"><span class="year">2009</span><span class="sep_year">-</span><span class="month">06</span><span class="sep_month">-</span><span class="day">04</span></div>
    <h3><a href="http://ynial.iteye.com/blog/401558">[ php or jsp ] + jquery.imgareaselect 处理图片截图等比缩放！</a></h3>
                    关键字: imgareaselect 图片缩放 图片截图 php jquery
  </div>

  <div class="blog_content">
    <span style="font-size: medium;">在开发中难免碰到图片上传问题！图片上传问题很好解决，而上传到服务器上的图片尺寸大小不一，使表现层无法使用统一的规格显示被上传的图片。
<br>那么被上传的图片的 等比例缩 与等比率放 还有等比率截图 可能会给我们的开发带来障碍！
<br>使用 jquery.imgareaselect图片处理插件完全可以解决这方面的问题；
<br></span>
<br>
<br>jquery.imgareaselect 官方网站：http://odyniec.net/projects/imgareaselect/
<br>
<br>例1：
<br>
<br><div id="" class="dp-highlighter"><div class="bar"><div class="tools">Javascript代码 <embed src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/clipboard_new.swf" flashvars="clipboard=%24(window).load(function%20()%20%7B%0A%20%20%24('%23myimg').imgAreaSelect(%7B%20selectionColor%3A%20'blue'%2C%20selectionOpacity%3A%200.2%2C%0A%20%20%20%20borderWidth%3A%202%20%7D)%3B%0A%7D)%3B%0A" quality="high" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="14" height="15">&nbsp;<a href="javascript:void()" title="收藏这段代码" onclick="code_favorites_do_favorite(this);return false;"><img class="star" src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_star.png" alt="收藏代码"><img class="spinner" src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/spinner.gif" style="display: none;"></a></div></div><ol class="dp-c" start="1"><li><span><span>$(window).load(</span><span class="keyword">function</span><span>&nbsp;()&nbsp;{&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;$(<span class="string">'#myimg'</span><span>).imgAreaSelect({&nbsp;selectionColor:&nbsp;</span><span class="string">'blue'</span><span>,&nbsp;selectionOpacity:&nbsp;0.2,&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;borderWidth:&nbsp;2&nbsp;});&nbsp;&nbsp;</span></li><li><span>});&nbsp;&nbsp;</span></li></ol></div><pre title="[ php or jsp ] + jquery.imgareaselect 处理图片截图等比缩放！" pre_index="0" source_url="http://ynial.iteye.com/blog/401558" codeable_type="Post" codeable_id="1040699" style="display: none;" name="code" class="javascript">$(window).load(function () {
  $('#myimg').imgAreaSelect({ selectionColor: 'blue', selectionOpacity: 0.2,
    borderWidth: 2 });
});
</pre>
<br><span style="color: darkblue;">myimg:需要处理的图片
<br>selectionColor:选择区域颜色
<br>selectionOpacity:选择区域透明度
<br>borderWidth:选择层边框大小
<br>如果使用selectionColor参数&nbsp; 就必须设置selectionOpacity（透明度）
<br></span>
<br>
<br>例2：等比率选择 并设置选择区域最大宽高
<br>
<br><div id="" class="dp-highlighter"><div class="bar"><div class="tools">Javascript代码 <embed src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/clipboard_new.swf" flashvars="clipboard=%24(window).load(function%20()%20%7B%0A%20%20%24('%23myimg').imgAreaSelect(%7BaspectRatio%3A%20'4%3A3'%2C%20maxWidth%3A%20400%2C%20maxHeight%3A%20300%7D)%3B%0A%7D)%3B%0A" quality="high" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="14" height="15">&nbsp;<a href="javascript:void()" title="收藏这段代码" onclick="code_favorites_do_favorite(this);return false;"><img class="star" src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_star.png" alt="收藏代码"><img class="spinner" src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/spinner.gif" style="display: none;"></a></div></div><ol class="dp-c" start="1"><li><span><span>$(window).load(</span><span class="keyword">function</span><span>&nbsp;()&nbsp;{&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;$(<span class="string">'#myimg'</span><span>).imgAreaSelect({aspectRatio:&nbsp;</span><span class="string">'4:3'</span><span>,&nbsp;maxWidth:&nbsp;400,&nbsp;maxHeight:&nbsp;300});&nbsp;&nbsp;</span></span></li><li><span>});&nbsp;&nbsp;</span></li></ol></div><pre title="[ php or jsp ] + jquery.imgareaselect 处理图片截图等比缩放！" pre_index="1" source_url="http://ynial.iteye.com/blog/401558" codeable_type="Post" codeable_id="1040699" style="display: none;" name="code" class="javascript">$(window).load(function () {
  $('#myimg').imgAreaSelect({aspectRatio: '4:3', maxWidth: 400, maxHeight: 300});
});
</pre>
<br><span style="color: darkblue;">myimg:需要处理的图片
<br>aspectRatio:选择框宽高比率
<br>maxWidth:选择区域透宽最大值
<br>maxHeight:选择区域透高最大值
<br></span>
<br>例3：默认选择区域设置 与 键盘支持
<br><div id="" class="dp-highlighter"><div class="bar"><div class="tools">Javascript代码 <embed src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/clipboard_new.swf" flashvars="clipboard=%24(window).load(function%20()%20%7B%0A%20%20%24('%23myimg').imgAreaSelect(%7B%20x1%3A%200%2C%20y1%3A%200%2C%20x2%3A%20400%2C%20y2%3A%20300%2Ckeys%3A%20%7B%20arrows%3A%2015%2C%20shift%3A%205%20%7D%20%7D)%3B%0A%7D)%3B%0A" quality="high" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="14" height="15">&nbsp;<a href="javascript:void()" title="收藏这段代码" onclick="code_favorites_do_favorite(this);return false;"><img class="star" src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_star.png" alt="收藏代码"><img class="spinner" src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/spinner.gif" style="display: none;"></a></div></div><ol class="dp-c" start="1"><li><span><span>$(window).load(</span><span class="keyword">function</span><span>&nbsp;()&nbsp;{&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;$(<span class="string">'#myimg'</span><span>).imgAreaSelect({&nbsp;x1:&nbsp;0,&nbsp;y1:&nbsp;0,&nbsp;x2:&nbsp;400,&nbsp;y2:&nbsp;300,keys:&nbsp;{&nbsp;arrows:&nbsp;15,&nbsp;shift:&nbsp;5&nbsp;}&nbsp;});&nbsp;&nbsp;</span></span></li><li><span>});&nbsp;&nbsp;</span></li></ol></div><pre title="[ php or jsp ] + jquery.imgareaselect 处理图片截图等比缩放！" pre_index="2" source_url="http://ynial.iteye.com/blog/401558" codeable_type="Post" codeable_id="1040699" style="display: none;" name="code" class="javascript">$(window).load(function () {
  $('#myimg').imgAreaSelect({ x1: 0, y1: 0, x2: 400, y2: 300,keys: { arrows: 15, shift: 5 } });
});
</pre>
<br><span style="color: darkblue;">myimg:需要处理的图片
<br>x1:右上角x轴坐标
<br>y1:右上角y轴坐标
<br>x2:右下角x轴坐标
<br>y2:右下角y轴坐标
<br>key:开启键盘支持
<br></span>
<br>
<br>例4：最关键的一个 等比率缩放
<br>实现原理 需要两个图片 第一图是原图 第二个图是选择区域后显示的图
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 用第一个图上的选择坐标+css控制 产生第二个图 实际上两个图是一样的 只不过通&nbsp;&nbsp; 
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 过css控制了第二张图的显示区域与缩放比率 如果需要实现真正截图功能必须使用
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 服务器端支持。 例如php&nbsp; asp aspx jsp ......
<br>
<br>代码如下
<br><div id="" class="dp-highlighter"><div class="bar"><div class="tools">Java代码 <embed src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/clipboard_new.swf" flashvars="clipboard=function%20preview(img%2C%20selection)%0A%7B%0A%20%20var%20scaleX%20%3D%20100%20%2F%20(selection.width%20%7C%7C%201)%3B%0A%20%20var%20scaleY%20%3D%20100%20%2F%20(selection.height%20%7C%7C%201)%3B%0A%0A%20%20%24('%23myimg%20%2B%20div%20%3E%20img').css(%7B%0A%20%20%20%20width%3A%20Math.round(scaleX%20*%20400)%20%2B%20'px'%2C%0A%20%20%20%20height%3A%20Math.round(scaleY%20*%20300)%20%2B%20'px'%2C%0A%20%20%20%20marginLeft%3A%20'-'%20%2B%20Math.round(scaleX%20*%20selection.x1)%20%2B%20'px'%2C%0A%20%20%20%20marginTop%3A%20'-'%20%2B%20Math.round(scaleY%20*%20selection.y1)%20%2B%20'px'%0A%20%20%7D)%3B%0A%7D%0A%0A%24(document).ready(function%20()%20%7B%0A%20%20%24('%3Cdiv%3E%3Cimg%20src%3D%22myimg.jpg%22%20style%3D%22position%3A%20relative%3B%22%20%2F%3E%3C%2Fdiv%3E')%0A%20%20%20%20.css(%7B%0A%20%20%20%20%20%20float%3A%20'left'%2C%0A%20%20%20%20%20%20position%3A%20'relative'%2C%0A%20%20%20%20%20%20overflow%3A%20'hidden'%2C%0A%20%20%20%20%20%20width%3A%20'100px'%2C%0A%20%20%20%20%20%20height%3A%20'100px'%0A%20%20%20%20%7D)%0A%20%20%20%20.insertAfter(%24('%23myimg'))%3B%0A%7D)%3B%0A%0A%24(window).load(function%20()%20%7B%0A%20%20%24('%23myimg').imgAreaSelect(%7B%20aspectRatio%3A%20'1%3A1'%2C%20onSelectChange%3A%20preview%20%7D)%3B%0A%7D)%3B%0A" quality="high" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="14" height="15">&nbsp;<a href="javascript:void()" title="收藏这段代码" onclick="code_favorites_do_favorite(this);return false;"><img class="star" src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_star.png" alt="收藏代码"><img class="spinner" src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/spinner.gif" style="display: none;"></a></div></div><ol class="dp-j" start="1"><li><span><span>function&nbsp;preview(img,&nbsp;selection)&nbsp;&nbsp;</span></span></li><li><span>{&nbsp;&nbsp;</span></li><li><span>&nbsp;&nbsp;var&nbsp;scaleX&nbsp;=&nbsp;<span class="number">100</span><span>&nbsp;/&nbsp;(selection.width&nbsp;||&nbsp;</span><span class="number">1</span><span>);&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;var&nbsp;scaleY&nbsp;=&nbsp;<span class="number">100</span><span>&nbsp;/&nbsp;(selection.height&nbsp;||&nbsp;</span><span class="number">1</span><span>);&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;</span></li><li><span>&nbsp;&nbsp;$(<span class="string">'#myimg&nbsp;+&nbsp;div&nbsp;&gt;&nbsp;img'</span><span>).css({&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;Math.round(scaleX&nbsp;*&nbsp;<span class="number">400</span><span>)&nbsp;+&nbsp;</span><span class="string">'px'</span><span>,&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;Math.round(scaleY&nbsp;*&nbsp;<span class="number">300</span><span>)&nbsp;+&nbsp;</span><span class="string">'px'</span><span>,&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;marginLeft:&nbsp;<span class="string">'-'</span><span>&nbsp;+&nbsp;Math.round(scaleX&nbsp;*&nbsp;selection.x1)&nbsp;+&nbsp;</span><span class="string">'px'</span><span>,&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;marginTop:&nbsp;<span class="string">'-'</span><span>&nbsp;+&nbsp;Math.round(scaleY&nbsp;*&nbsp;selection.y1)&nbsp;+&nbsp;</span><span class="string">'px'</span><span>&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;});&nbsp;&nbsp;</span></li><li><span>}&nbsp;&nbsp;</span></li><li><span>&nbsp;&nbsp;</span></li><li><span>$(document).ready(function&nbsp;()&nbsp;{&nbsp;&nbsp;</span></li><li><span>&nbsp;&nbsp;$(<span class="string">'&lt;div&gt;&lt;img&nbsp;src="myimg.jpg"&nbsp;style="position:&nbsp;relative;"&nbsp;/&gt;&lt;/div&gt;'</span><span>)&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;.css({&nbsp;&nbsp;</span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">float</span><span>:&nbsp;</span><span class="string">'left'</span><span>,&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;<span class="string">'relative'</span><span>,&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;<span class="string">'hidden'</span><span>,&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;<span class="string">'100px'</span><span>,&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;<span class="string">'100px'</span><span>&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;</span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;.insertAfter($(<span class="string">'#myimg'</span><span>));&nbsp;&nbsp;</span></span></li><li><span>});&nbsp;&nbsp;</span></li><li><span>&nbsp;&nbsp;</span></li><li><span>$(window).load(function&nbsp;()&nbsp;{&nbsp;&nbsp;</span></li><li><span>&nbsp;&nbsp;$(<span class="string">'#myimg'</span><span>).imgAreaSelect({&nbsp;aspectRatio:&nbsp;</span><span class="string">'1:1'</span><span>,&nbsp;onSelectChange:&nbsp;preview&nbsp;});&nbsp;&nbsp;</span></span></li><li><span>});&nbsp;&nbsp;</span></li></ol></div><pre title="[ php or jsp ] + jquery.imgareaselect 处理图片截图等比缩放！" pre_index="3" source_url="http://ynial.iteye.com/blog/401558" codeable_type="Post" codeable_id="1040699" style="display: none;" name="code" class="java">function preview(img, selection)
{
  var scaleX = 100 / (selection.width || 1);
  var scaleY = 100 / (selection.height || 1);

  $('#myimg + div &gt; img').css({
    width: Math.round(scaleX * 400) + 'px',
    height: Math.round(scaleY * 300) + 'px',
    marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
    marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
  });
}

$(document).ready(function () {
  $('&lt;div&gt;&lt;img src="myimg.jpg" style="position: relative;" /&gt;&lt;/div&gt;')
    .css({
      float: 'left',
      position: 'relative',
      overflow: 'hidden',
      width: '100px',
      height: '100px'
    })
    .insertAfter($('#myimg'));
});

$(window).load(function () {
  $('#myimg').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
});
</pre>
<br>
<br><span style="color: darkblue;">myimg:需要处理的图片
<br>onSelectChange:选择区域发生变化的时候回调处理
<br>function preview(img, selection):回调函数
<br>
<br>var scaleX = 100 / (selection.width || 1); 100-&gt;新图的宽 
<br>var scaleY = 100 / (selection.height || 1);100-&gt;新图的高
<br>
<br>
<br>
<br>width: Math.round(scaleX * 400) + 'px', 400-&gt;原图的宽
<br>height: Math.round(scaleY * 300) + 'px', 300-&gt;原图的高
<br>
<br>
<br>$('&lt;div&gt;&lt;img src="myimg.jpg" style="position: relative;" /&gt;&lt;/div&gt;')
<br>&nbsp;&nbsp;&nbsp; .css({
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; float: 'left',
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: 'relative',
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; overflow: 'hidden',
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: '100px',
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: '100px'
<br>&nbsp;&nbsp;&nbsp; })
<br>
<br>100px 是选择后新图显示区域的宽和高
<br>
<br>值得注意的是：
<br>
<br>&nbsp;&nbsp; 回调函数中实际图的宽高&nbsp; 回调函数中新图的宽高 
<br>&nbsp;&nbsp; 这些参数必须设置正确、否则会出现 选择偏差
<br></span>
<br>
<br>
<br>接下来服务器端处理 先说 php 如何处理
<br><div id="" class="dp-highlighter"><div class="bar"><div class="tools">Php代码 <embed src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/clipboard_new.swf" flashvars="clipboard=%24x%20%3D%20%24_GET%5B'x'%5D%3B%2F%2F%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F%E5%B7%A6%E4%B8%8A%E8%A7%92x%E8%BD%B4%E5%9D%90%E6%A0%87%0A%24y%20%3D%20%24_GET%5B'y'%5D%3B%2F%2F%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F%E5%B7%A6%E4%B8%8A%E8%A7%92y%E8%BD%B4%E5%9D%90%E6%A0%87%0A%24w%20%3D%20%24_GET%5B'w'%5D%3B%2F%2F%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%80%89%E6%8B%A9%E5%8C%BA%20%E7%9A%84%E5%AE%BD%0A%24h%20%3D%20%24_GET%5B'h'%5D%3B%2F%2F%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%80%89%E6%8B%A9%E5%8C%BA%20%E7%9A%84%E9%AB%98%0A%24filename%20%3D%20%22c%3A%2Fmyimg%22%3B%2F%2F%E5%9B%BE%E7%89%87%E7%9A%84%E8%B7%AF%E5%BE%84%0A%24im%20%3D%20imagecreatefromjpeg(%24filename)%3B%2F%2F%20%E8%AF%BB%E5%8F%96%E9%9C%80%E8%A6%81%E5%A4%84%E7%90%86%E7%9A%84%E5%9B%BE%E7%89%87%0A%24newim%20%3D%20imagecreatetruecolor(100%2C%20100)%3B%2F%2F%E4%BA%A7%E7%94%9F%E6%96%B0%E5%9B%BE%E7%89%87%20100%20100%20%E4%B8%BA%E6%96%B0%E5%9B%BE%E7%89%87%E7%9A%84%E5%AE%BD%E5%92%8C%E9%AB%98%0A%0Aimagecopyresampled(%24newim%2C%20%24im%2C%200%2C%200%2C%20%24x%2C%20%24y%2C%20100%2C%20100%2C%20%24w%2C%20%24h)%3B%0A%2F%2F%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5B1%5D%20%20%20%20%5B2%5D%20%5B3%5D%5B4%5D%20%5B5%5D%20%5B6%5D%20%5B7%5D%20%20%5B8%5D%20%20%5B9%5D%20%5B10%5D%0A%2F%2F%5B5%5D%20%20%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F%E5%B7%A6%E4%B8%8A%E8%A7%92x%E8%BD%B4%E5%9D%90%E6%A0%87%0A%2F%2F%5B6%5D%20%20%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F%E5%B7%A6%E4%B8%8A%E8%A7%92y%E8%BD%B4%E5%9D%90%E6%A0%87%0A%2F%2F%5B7%5D%20%20%E7%94%9F%E6%88%90%E6%96%B0%E5%9B%BE%E7%89%87%E7%9A%84%E5%AE%BD%0A%2F%2F%5B8%5D%20%20%E7%94%9F%E6%88%90%E6%96%B0%E5%9B%BE%E7%89%87%E7%9A%84%E9%AB%98%0A%2F%2F%5B9%5D%20%20%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%80%89%E6%8B%A9%E5%8C%BA%20%E7%9A%84%E5%AE%BD%0A%2F%2F%5B10%5D%20%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%80%89%E6%8B%A9%E5%8C%BA%20%E7%9A%84%E9%AB%98%20%20%20%20%20%20%20%20%20%20%0Aimagejpeg(%24newim%2C%20%24filename)%3B%0Aimagedestroy(%24im)%3B%0Aimagedestroy(%24newim)%3B%0A%0A" quality="high" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="14" height="15">&nbsp;<a href="javascript:void()" title="收藏这段代码" onclick="code_favorites_do_favorite(this);return false;"><img class="star" src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_star.png" alt="收藏代码"><img class="spinner" src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/spinner.gif" style="display: none;"></a></div></div><ol class="dp-c" start="1"><li><span><span class="vars">$x</span><span>&nbsp;=&nbsp;</span><span class="vars">$_GET</span><span>[</span><span class="string">'x'</span><span>];</span><span class="comment">//客户端选择区域左上角x轴坐标</span><span>&nbsp;&nbsp;</span></span></li><li><span><span class="vars">$y</span><span>&nbsp;=&nbsp;</span><span class="vars">$_GET</span><span>[</span><span class="string">'y'</span><span>];</span><span class="comment">//客户端选择区域左上角y轴坐标</span><span>&nbsp;&nbsp;</span></span></li><li><span><span class="vars">$w</span><span>&nbsp;=&nbsp;</span><span class="vars">$_GET</span><span>[</span><span class="string">'w'</span><span>];</span><span class="comment">//客户端选择区&nbsp;的宽</span><span>&nbsp;&nbsp;</span></span></li><li><span><span class="vars">$h</span><span>&nbsp;=&nbsp;</span><span class="vars">$_GET</span><span>[</span><span class="string">'h'</span><span>];</span><span class="comment">//客户端选择区&nbsp;的高</span><span>&nbsp;&nbsp;</span></span></li><li><span><span class="vars">$filename</span><span>&nbsp;=&nbsp;</span><span class="string">"c:/myimg"</span><span>;</span><span class="comment">//图片的路径</span><span>&nbsp;&nbsp;</span></span></li><li><span><span class="vars">$im</span><span>&nbsp;=&nbsp;imagecreatefromjpeg(</span><span class="vars">$filename</span><span>);</span><span class="comment">//&nbsp;读取需要处理的图片</span><span>&nbsp;&nbsp;</span></span></li><li><span><span class="vars">$newim</span><span>&nbsp;=&nbsp;imagecreatetruecolor(100,&nbsp;100);</span><span class="comment">//产生新图片&nbsp;100&nbsp;100&nbsp;为新图片的宽和高</span><span>&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;</span></li><li><span>imagecopyresampled(<span class="vars">$newim</span><span>,&nbsp;</span><span class="vars">$im</span><span>,&nbsp;0,&nbsp;0,&nbsp;</span><span class="vars">$x</span><span>,&nbsp;</span><span class="vars">$y</span><span>,&nbsp;100,&nbsp;100,&nbsp;</span><span class="vars">$w</span><span>,&nbsp;</span><span class="vars">$h</span><span>);&nbsp;&nbsp;</span></span></li><li><span><span class="comment">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[1]&nbsp;&nbsp;&nbsp;&nbsp;[2]&nbsp;[3][4]&nbsp;[5]&nbsp;[6]&nbsp;[7]&nbsp;&nbsp;[8]&nbsp;&nbsp;[9]&nbsp;[10]</span><span>&nbsp;&nbsp;</span></span></li><li><span><span class="comment">//[5]&nbsp;&nbsp;客户端选择区域左上角x轴坐标</span><span>&nbsp;&nbsp;</span></span></li><li><span><span class="comment">//[6]&nbsp;&nbsp;客户端选择区域左上角y轴坐标</span><span>&nbsp;&nbsp;</span></span></li><li><span><span class="comment">//[7]&nbsp;&nbsp;生成新图片的宽</span><span>&nbsp;&nbsp;</span></span></li><li><span><span class="comment">//[8]&nbsp;&nbsp;生成新图片的高</span><span>&nbsp;&nbsp;</span></span></li><li><span><span class="comment">//[9]&nbsp;&nbsp;客户端选择区&nbsp;的宽</span><span>&nbsp;&nbsp;</span></span></li><li><span><span class="comment">//[10]&nbsp;客户端选择区&nbsp;的高&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span>&nbsp;&nbsp;</span></span></li><li><span>imagejpeg(<span class="vars">$newim</span><span>,&nbsp;</span><span class="vars">$filename</span><span>);&nbsp;&nbsp;</span></span></li><li><span>imagedestroy(<span class="vars">$im</span><span>);&nbsp;&nbsp;</span></span></li><li><span>imagedestroy(<span class="vars">$newim</span><span>);&nbsp;&nbsp;</span></span></li></ol></div><pre title="[ php or jsp ] + jquery.imgareaselect 处理图片截图等比缩放！" pre_index="4" source_url="http://ynial.iteye.com/blog/401558" codeable_type="Post" codeable_id="1040699" style="display: none;" name="code" class="php">$x = $_GET['x'];//客户端选择区域左上角x轴坐标
$y = $_GET['y'];//客户端选择区域左上角y轴坐标
$w = $_GET['w'];//客户端选择区 的宽
$h = $_GET['h'];//客户端选择区 的高
$filename = "c:/myimg";//图片的路径
$im = imagecreatefromjpeg($filename);// 读取需要处理的图片
$newim = imagecreatetruecolor(100, 100);//产生新图片 100 100 为新图片的宽和高

imagecopyresampled($newim, $im, 0, 0, $x, $y, 100, 100, $w, $h);
//                  [1]    [2] [3][4] [5] [6] [7]  [8]  [9] [10]
//[5]  客户端选择区域左上角x轴坐标
//[6]  客户端选择区域左上角y轴坐标
//[7]  生成新图片的宽
//[8]  生成新图片的高
//[9]  客户端选择区 的宽
//[10] 客户端选择区 的高          
imagejpeg($newim, $filename);
imagedestroy($im);
imagedestroy($newim);

</pre>
<br>
  </div>

  
  <div class="attachments">
    
      
        <ul>
          <li><a href="http://dl.iteye.com/topics/download/dc1e156c-8a90-3a46-b5a6-256814dfc5a8">imgareaselect.rar</a> (285.7 KB)</li>
          
          <li>下载次数: 858</li>
        </ul>
      
    
    
  </div>


  <script type="text/javascript"><!--
google_ad_client = "pub-1076724771190722";
/* JE个人博客468x60 */
google_ad_slot = "5506163105";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript" src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/show_ads.js">
</script><ins style="display: inline-table; border: medium none; height: 60px; margin: 0pt; padding: 0pt; position: relative; visibility: visible; width: 468px;"><ins id="aswift_0_anchor" style="display: block; border: medium none; height: 60px; margin: 0pt; padding: 0pt; position: relative; visibility: visible; width: 468px;"><iframe allowtransparency="true" hspace="0" marginwidth="0" marginheight="0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){i+='.call';setTimeout(h,0)}else if(h.match){i+='.nav';w.location.replace(h)}s.log&amp;&amp;s.log.push(i)}" vspace="0" id="aswift_0" name="aswift_0" style="left: 0pt; position: absolute; top: 0pt;" width="468" frameborder="0" height="60" scrolling="no"></iframe></ins></ins>
  
  

  <div class="blog_nav">
    <div class="pre_next">
      <a href="http://ynial.iteye.com/blog/593957" class="next" title="有关 codeigniter pagination 的注意事项">有关 codeigniter pagination 的注意事项</a>
      |
      <a href="http://ynial.iteye.com/blog/309689" class="pre" title="css !important">css !important</a>
    </div>
  </div>

  <div class="blog_bottom">
    <ul>
      <li>09:18</li>
      <li>浏览 (4122)</li>
            <li><a href="#comments">评论</a> (0)</li>
      <li>分类: <a href="http://ynial.iteye.com/category/35646">jquery</a></li>
      
      
      
      <li class="last"><a href="http://www.iteye.com/wiki/topic/401558" target="_blank" class="more">相关推荐</a></li>
    </ul>
  </div>

  <div class="blog_comment">
    <h5>评论</h5>
    <a id="comments" name="comments"></a>
    
    
    
  </div>

  <div class="blog_comment">
    <h5>发表评论</h5>
          
      
        <form action="/blog/401558" id="comment_form" method="post" onsubmit="return false;">          


  <input value="true" id="editor_bbcode_flag" type="hidden">



<div id="editor_main"><div class="clearfix" id="editor_wrapper"><div id="bbcode_emotions"><h5>表情图标</h5><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_biggrin.gif"><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_smile.gif"><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_sad.gif"><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_surprised.gif"><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_eek.gif"><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_confused.gif"><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_cool.gif"><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_lol.gif"><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_mad.gif"><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_razz.gif"><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_redface.gif"><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_cry.gif"><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_evil.gif"><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_twisted.gif"><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_rolleyes.gif"><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_wink.gif"><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_exclaim.gif"><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_question.gif"><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_idea.gif"><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/icon_arrow.gif"></div><div id="bbcode_controllers"><div id="bbcode_toolbar"><input id="button_bold" value="B" type="button"><input id="button_italic" value="I" type="button"><input id="button_underline" value="U" type="button"><input value="Quote" type="button"><input value="Code" type="button"><input value="List" type="button"><input value="Img" type="button"><input value="URL" type="button"><input value="Flash" type="button"><input value="Table" type="button"><br>字体颜色: <select id="select_color"><option selected="selected" value="black" style="color: black;">标准</option><option value="darkred" style="color: darkred;">深红</option><option value="red" style="color: red;">红色</option><option value="orange" style="color: orange;">橙色</option><option value="brown" style="color: brown;">棕色</option><option value="yellow" style="color: yellow;">黄色</option><option value="green" style="color: green;">绿色</option><option value="olive" style="color: olive;">橄榄</option><option value="cyan" style="color: cyan;">青色</option><option value="blue" style="color: blue;">蓝色</option><option value="darkblue" style="color: darkblue;">深蓝</option><option value="indigo" style="color: indigo;">靛蓝</option><option value="violet" style="color: violet;">紫色</option><option value="gray" style="color: gray;">灰色</option><option value="white" style="color: white;">白色</option><option value="black" style="color: black;">黑色</option></select>&nbsp;字体大小: <select id="select_font"><option selected="selected" value="0">标准</option><option value="xx-small">1 (xx-small)</option><option value="x-small">2 (x-small)</option><option value="small">3 (small)</option><option value="medium">4 (medium)</option><option value="large">5 (large)</option><option value="x-large">6 (x-large)</option><option value="xx-large">7 (xx-large)</option></select>&nbsp;对齐: <select id="select_align"><option selected="selected" value="0">标准</option><option value="left">居左</option><option value="center">居中</option><option value="right">居右</option></select></div><div id="bbcode_tooltip">提示：选择您需要装饰的文字, 按上列按钮即可添加上相应的标签</div><textarea class="validate-richeditor bad-words min-length-5" cols="40" id="editor_body" name="comment[body]" rows="20" style="width: 500px; height: 350px;"></textarea></div></div></div>


<script type="text/javascript">
  var editor = new Control.TextArea.Editor("editor_body", "bbcode", false);
</script>
          <p style="text-align: right; padding-right: 30px;">您还没有登录，请<a href="http://ynial.iteye.com/login">登录</a>后发表评论(快捷键 Alt+S / Ctrl+Enter) <input class="submit" id="quick_reply_button" name="commit" value="提交" type="submit"></p>
        </form>
        <script type="text/javascript">
          new HotKey("s",function() {$('quick_reply_button').click();},{altKey: true, ctrlKey: false});
          new HotKey(new Number(13),function() {$('quick_reply_button').click();},{altKey: false, ctrlKey: true});

          new Validation("comment_form", {immediate: false, onFormValidate: function(result, form){
    
            if(confirm('您需要登录以后才能执行这个操作，现在要登录吗？')) window.location.href = '/login';
    
        }});
        </script>
      
      </div>
</div>


<script type="text/javascript">
  dp.SyntaxHighlighter.HighlightAll('code', true, true);
  
  $$('#main .blog_content pre[name=code]').each(function(pre, index){ // blog content
    var post_id = 1040699;
    var location = window.location;
    source_url = location.protocol + "//" + location.host + location.pathname + location.search;
    pre.writeAttribute('codeable_id', post_id);
    pre.writeAttribute('codeable_type', "Post");
    pre.writeAttribute('source_url', source_url);
    pre.writeAttribute('pre_index', index);
    pre.writeAttribute('title', '[ php or jsp ] + jquery.imgareaselect 处理图片截图等比缩放！');
  });
  $$('#main .blog_comment > div').each(function(comment){// comment
    var post_id = comment.id.substr(2);
    $$("#"+comment.id+" pre[name=code]").each(function(pre, index){
      var location = window.location;
      source_url = location.protocol + "//" + location.host + location.pathname + location.search;
      source_url += "#" + comment.id;
      pre.writeAttribute('codeable_id', post_id);
      pre.writeAttribute('codeable_type', "Post");
      pre.writeAttribute('source_url', source_url);
      pre.writeAttribute('pre_index', index);
      pre.writeAttribute('title', '[ php or jsp ] + jquery.imgareaselect 处理图片截图等比缩放！');
    });
  });
  code_favorites_init();

  fix_image_size($$('div.blog_content img'), 700);
  function quote_comment(id) {
    new Ajax.Request('/editor/quote', {
      parameters: {'id':id, 'type':'Post'},
      onSuccess:function(response){editor.bbcode_editor.textarea.insertAfterSelection(response.responseText);}
    });
  }
</script>



        </div>

        <div id="local">
          <div class="local_top"></div>
          <div id="blog_owner">
            <div id="blog_owner_logo"><a href="http://ynial.iteye.com/"><img alt="ynial的博客" class="logo" src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/user-logo.gif" title="ynial的博客: ynial"></a></div>
            <div id="blog_owner_name">ynial</div>
          </div>
          <div id="blog_actions">
            <ul>
              <li>浏览: 37860 次</li>
              
              <li>来自: ...</li>
              <li><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/offline.gif"></li>
              <li>
                <a href="http://ynial.iteye.com/blog/profile" class="profile">详细资料</a>
                <a href="http://ynial.iteye.com/blog/guest_book" class="guest_book">留言簿</a>
              </li>
              
            </ul>
            <h5>搜索本博客</h5>
            <form action="/blog/search" method="get">              <input class="text" id="query" name="query" style="margin-left: 10px; width: 110px;" type="text">
              <input class="submit" value="搜索" type="submit">
            </form>          </div>
          
            <div id="user_visits" class="clearfix">
              <h5>最近访客 <span style="font-weight: normal; font-size: 12px; padding-left: 30px;"><a href="http://ynial.iteye.com/blog/user_visits">&gt;&gt;更多访客</a></span></h5>
              
                <div class="user_visit">
                  <div class="logo"><a href="http://276306514.iteye.com/" target="_blank"><img alt="276306514的博客" class="logo" src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/user-logo-thumb.gif" title="276306514的博客: "></a></div>
                  <div class="left"><a href="http://276306514.iteye.com/" target="_blank">276306514</a></div>
                </div>
              
                <div class="user_visit">
                  <div class="logo"><a href="http://huangweiwi.iteye.com/" target="_blank"><img alt="huangweiwi的博客" class="logo" src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/user-logo-thumb.gif" title="huangweiwi的博客: "></a></div>
                  <div class="left"><a href="http://huangweiwi.iteye.com/" target="_blank">huangweiwi</a></div>
                </div>
              
                <div class="user_visit">
                  <div class="logo"><a href="http://derekzhang.iteye.com/" target="_blank"><img alt="derekzhang的博客" class="logo" src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/user-logo-thumb.gif" title="derekzhang的博客: "></a></div>
                  <div class="left"><a href="http://derekzhang.iteye.com/" target="_blank">derekzhang</a></div>
                </div>
              
                <div class="user_visit">
                  <div class="logo"><a href="http://zjkilly.iteye.com/" target="_blank"><img alt="zjkilly的博客" class="logo" src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/b407b9fa-864d-335c-82a1-caccc504fb63-thumb.jpeg" title="zjkilly的博客: 绝对领域"></a></div>
                  <div class="left"><a href="http://zjkilly.iteye.com/" target="_blank">zjkilly</a></div>
                </div>
              
            </div>
          
                      <div id="blog_menu">
              <h5>博客分类</h5>
              <ul>
                <li><a href="http://ynial.iteye.com/">全部博客 (26)</a></li>
                
                  <li><a href="http://ynial.iteye.com/category/24150">HSQL (1)</a></li>
                
                  <li><a href="http://ynial.iteye.com/category/24775">标签 (3)</a></li>
                
                  <li><a href="http://ynial.iteye.com/category/35646">jquery (8)</a></li>
                
                  <li><a href="http://ynial.iteye.com/category/96181">php (2)</a></li>
                
                  <li><a href="http://ynial.iteye.com/category/142831">swing (2)</a></li>
                
              </ul>
            </div>
            
            
            <div id="blog_others">
              <h5>其他分类</h5>
              <ul>
                <li><a href="http://ynial.iteye.com/blog/favorite">我的收藏</a> (3)</li>
                <li><a href="http://ynial.iteye.com/blog/code_favorite">我的代码</a> (0)</li>
                                                <li><a href="http://ynial.iteye.com/blog/topic">我的论坛主题帖</a> (1)</li>
                <li><a href="http://ynial.iteye.com/blog/post">我的所有论坛帖</a> (7)</li>
                <li><a href="http://ynial.iteye.com/blog/article">我的精华良好帖</a> (0)</li>
                
                  <li><a href="http://ynial.iteye.com/blog/solution">我解决的问题</a> (1) </li>
                              </ul>
            </div>
            
            <div id="recent_groups">
              <h5>最近加入群组</h5>
              <ul>
                
              </ul>
            </div>
            
                          <div id="month_blogs">
                <h5>存档</h5>
                <ul>
                  
                    <li><a href="http://ynial.iteye.com/blog/monthblog/2011-02">2011-02</a> (2)</li>
                  
                    <li><a href="http://ynial.iteye.com/blog/monthblog/2011-01">2011-01</a> (1)</li>
                  
                    <li><a href="http://ynial.iteye.com/blog/monthblog/2010-09">2010-09</a> (4)</li>
                  
                  <li><a href="http://ynial.iteye.com/blog/monthblog_more">更多存档...</a></li>
                </ul>
              </div>
                        <div id="comments_top">
              <h5>评论排行榜</h5>
              <ul>
                
                  <li><a href="http://ynial.iteye.com/blog/723300" title="jquery 日历 任务  类似 google 日历">jquery 日历 任务  类似 google 日历</a></li>
                
                  <li><a href="http://ynial.iteye.com/blog/722721" title="jquery 类似 igoogle   jQuery UI &amp; sortable/draggable UI modules &amp; jQuery COOKIE pl">jquery 类似 igoogle   jQuery UI &amp; sorta ...</a></li>
                
                  <li><a href="http://ynial.iteye.com/blog/754951" title="一个职位让我想到的">一个职位让我想到的</a></li>
                
                  <li><a href="http://ynial.iteye.com/blog/759900" title="jquery chart处理">jquery chart处理</a></li>
                
                  <li><a href="http://ynial.iteye.com/blog/765564" title="关于职位搜索的问题">关于职位搜索的问题</a></li>
                
              </ul>
            </div>
            <div id="rss">
              <ul>
                <li><a href="http://ynial.iteye.com/rss" target="_blank"><img alt="Rss" src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/rss.png"></a></li>
                <li><a href="http://fusion.google.com/add?feedurl=http://ynial.iteye.com/rss" target="_blank"><img alt="Rss_google" src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/rss_google.gif"></a></li>
              </ul>
            </div>
            <div class="local_bottom"></div>
          
        </div>
      </div>

      <div id="footer" class="clearfix">
        <div id="copyright">
          <hr>
          声明：ItEye文章版权属于作者，受法律保护。没有作者书面许可不得转载。若作者同意转载，必须以超链接形式标明文章原始出处和作者。<br>
          © 2003-2011 ItEye.com.   All rights reserved.  [ 京ICP证110151号 ]
        </div>
      </div>
    </div>
    <script type="text/javascript">
  document.write("<img src='http://stat.iteye.com/?url="+ encodeURIComponent(document.location.href) + "&referrer=" + encodeURIComponent(document.referrer) + "&user_id=-1' width='0' height='0' />");
</script><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/a.gif" width="0" height="0">
    
  <div style="position: absolute; display: none; z-index: 9999;" id="livemargins_control"><img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/monitor-background-horizontal.png" style="position: absolute; left: -77px; top: -5px;" width="77" height="5">	<img src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/monitor-background-vertical.png" style="position: absolute; left: 0pt; top: -5px;">	<img id="monitor-play-button" src="juqery.imgareaselect%E6%95%99%E7%A8%8B_files/monitor-play-button.png" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.5" style="position: absolute; left: 1px; top: 0pt; opacity: 0.5; cursor: pointer;"></div></body></html>